import {
	NavCubePlugin
} from "@/assets/libs/@xeokit/xeokit-sdk/src/plugins/NavCubePlugin/NavCubePlugin.js"
import {
	TreeViewPlugin
} from "@/assets/libs/@xeokit/xeokit-sdk/src/plugins/TreeViewPlugin/TreeViewPlugin.js"
import {
	SkyboxesPlugin
} from "@/assets/libs/@xeokit/xeokit-sdk/src/plugins/SkyboxesPlugin/SkyboxesPlugin.js"
// import { canvasContextMenu, treeViewContextMenu, objectContextMenu } from "@/utils/menu"
import store from "@/store"

export default {
	// 初始化模型配置
	initModelConfig(viewer) {
		// 旋转中心显示点
		const pivotElement = document.createRange().createContextualFragment("<div class='camera-pivot-marker'></div>")
			.firstChild
		document.body.appendChild(pivotElement)
		viewer.cameraControl.pivotElement = pivotElement

		viewer.camera.eye = [-3.933, 2.855, 27.018]
		viewer.camera.look = [4.4, 3.724, 8.899]
		viewer.camera.up = [-0.018, 0.999, 0.039]

		viewer.camera.perspective.far = 100000000;


		// viewer.scene.xrayMaterial.fill = true
		viewer.scene.xrayMaterial.fillAlpha = 0.1 // 穿透样式设置
		viewer.scene.xrayMaterial.fillColor = [0, 0, 0]
		viewer.scene.xrayMaterial.edgeAlpha = 0.1
		// viewer.scene.xrayMaterial.edgeColor = [0, 0, 0]

		viewer.scene.highlightMaterial.fill = true
		viewer.scene.highlightMaterial.edges = true
		viewer.scene.highlightMaterial.fillAlpha = 0.1
		viewer.scene.highlightMaterial.edgeAlpha = 0.1
		// viewer.scene.highlightMaterial.edgeColor = [1, 1, 0]
		viewer.cameraControl.followPointer = true

		viewer.cameraControl.panRightClick = true
		// viewer.camera.perspective.near = 0.1
		// viewer.camera.perspective.far = 1e27 // 用100万，结果一样。
		// viewer.camera.ortho.near = 0.1
		// viewer.camera.ortho.far = 1e27

		// 构件鼠标悬停效果
		let lastEntity = null
		const hoverEvents = viewer.cameraControl.on("hover", pickResult => {
			// 开关控制器
			if (!store.state.hoverHighlight) {
				if (lastEntity) {
					lastEntity.highlighted = false
					lastEntity = null
				}
				return
			}
			if (pickResult) {
				if (!lastEntity || pickResult.entity.id !== lastEntity.id) {
					lastEntity && (lastEntity.highlighted = false)
					lastEntity = pickResult.entity
					pickResult.entity.highlighted = true
				}
			} else if (lastEntity) {
				lastEntity.highlighted = false
				lastEntity = null
			}
		})
	},
	// 右下角方块映射
	navCube(viewer, canvasId) {
		new NavCubePlugin(viewer, {
			canvasId,
			visible: true,
			size: 250, // 单位(像素)
			alignment: "topRight", // 将NavCube与查看器画布的右上角对齐
			topMargin: 170, // 距查看器画布顶部170像素边距
			cameraFly: true, // 将相机移动到每个选定轴/对角线
			cameraFitFOV: 45, // 一旦相机安装到视图上，场景需要多少视野
			cameraFlyDuration: 0.5, // 相机飞到每个新轴/对角线所需的时间（秒）
			hoverColor: "rgba(0,0.5,0,0.4)"
		})
	},
	// 目录树
	directoryTree(viewer, containerElement, hierarchy) {
		// 目录树
		const treeView = new TreeViewPlugin(viewer, {
			containerElement,
			autoExpandDepth: 1, // 最初将树扩展到三个节点深
			hierarchy: hierarchy || "containment", // types,storeys,containment
			sortNodes: true, // 排序节点
			pruneEmptyNodes: false // 为没有几何体的对象子树创建节点
		})
		// 目录树右键菜单事件
		// treeView.on("contextmenu", e => {
		// 	treeViewContextMenu.context = {
		// 		// 必须在打开菜单之前设置上下文
		// 		viewer: e.viewer,
		// 		treeViewPlugin: e.treeViewPlugin,
		// 		treeViewNode: e.treeViewNode,
		// 		entity: e.viewer.scene.objects[e.treeViewNode.objectId] // 仅当树节点是叶节点时定义
		// 	}

		// 	treeViewContextMenu.show(e.event.pageX, e.event.pageY)
		// })
		// 目录树单击事件
		treeView.on("nodeTitleClicked", e => {
			console.log(e.treeViewNode.objectId)
			try {
				e.treeViewPlugin.unShowNode()
				e.treeViewPlugin.showNode(e.treeViewNode.objectId)
			} catch (e) {}
			const scene = viewer.scene
			const objectIds = []
			// 点击目录树后更新当前构件以展示其属性信息
			const metaObject = viewer.metaScene.metaObjects[e.treeViewNode.objectId]
			try {
				if (metaObject) {
					let obj = {
						id: metaObject.id,
						type: metaObject.type,
						name: metaObject.name,
						parent: metaObject.parent.id,
						properties: metaObject.properties
					}
					store.commit("updateCurEntity", obj)
				} else {
					store.commit("updateCurEntity", null)
				}
			} catch (e) {}

			e.treeViewPlugin.withNodeTree(e.treeViewNode, treeViewNode => {
				if (treeViewNode.objectId) {
					objectIds.push(treeViewNode.objectId)
				}
			})
			scene.setObjectsXRayed(scene.objectIds, true)
			scene.setObjectsVisible(scene.objectIds, true)
			scene.setObjectsXRayed(objectIds, false)
			viewer.cameraFlight.flyTo({
					aabb: scene.getAABB(objectIds),
					duration: 1.5
				},
				() => {
					// setTimeout(() => {
					// scene.setObjectsVisible(scene.xrayedObjectIds, false)
					// scene.setObjectsXRayed(scene.xrayedObjectIds, false)
					// }, 1000)
				}
			)
		})
		// 鼠标右键显示菜单的方法
		// viewer.cameraControl.on("rightClick", e => {
		// 	var hit = viewer.scene.pick({
		// 		canvasPos: e.canvasPos
		// 	})
		// 	// try {
		// 	// 	console.log(hit.entity.id)
		// 	// } catch (e) {}
		// 	// viewer.scene.setObjectsOffset(
		// 	// 	hit.entity.id,
		// 	// 	math.mulVec3Scalar([-25, -3, 0], 0.75 / math.lenVec3([-25, -3, 0]), [])
		// 	// )
		// 	if (hit && hit.entity.isObject) {
		// 		objectContextMenu.context = {
		// 			// Must set context before showing menu
		// 			viewer,
		// 			treeViewPlugin: treeView,
		// 			entity: hit.entity
		// 		}

		// 		objectContextMenu.show(e.event.pageX, e.event.pageY)
		// 	} else {
		// 		// Must set context before showing menu
		// 		canvasContextMenu.context = { viewer }
		// 		canvasContextMenu.show(e.event.pageX, e.event.pageY)
		// 	}
		// 	e.event.preventDefault()
		// })

		// 鼠标单击事件,回调参数为canvasPos
		// viewer.scene.input.on("mouseclicked", function(canvasPos) {
		// 	const hit = viewer.scene.pick({
		// 		canvasPos
		// 	})
		// 	if (hit) {
		// 		viewer.scene.setObjectsSelected(hit.entity.id,true)
		// 		console.log(viewer.scene.selectedObjectIds)
		// 		const entity = hit.entity
		// 		const metaObject = viewer.metaScene.metaObjects[entity.id]
		// 		if (metaObject) {
		// 			let obj = metaObject.getJSON()
		// 			// console.log(obj)
		// 			store.commit("changeComponentID", obj.id)
		// 		}
		// 		console.log(canvasPos)
		// 	}
		// })
		store.commit('saveTreeView', treeView)
	}
}